<template>
    <div class="money">
        <div class="money01">
            <div>
                <p>_</p>
                <p>今日订单</p>
            </div>
            <div>
                <span>135</span>
                <i class="el-icon-tickets"></i>
            </div>
        </div>
        <div class="money01" style="background-color: #E47943">
            <div>
                <p>_</p>
                <p>今日金额</p>
            </div>
            <div>
                <span>2580</span>
                <i class="el-icon-coin"></i>
            </div>
        </div>
        <div class="money01" style="background-color: #EBB531">
            <div>
                <p>_</p>
                <p>新增用户</p>
            </div>
            <div>
                <span>4800</span>
                <i class="el-icon-user"></i>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "money",
    components: {

    },
    data() {
        return {

        }
    },
    methods: {

    },
    mounted() {

    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.money p{
    text-align: left;
}
.money {
    display: flex;
    width: 100%;
}

.money>div {
    width: 31%;
    color: white;
    height: 100px;
    padding-left: 10px;
    position: relative;
}

.money>div:nth-of-type(2) {
    margin-left: 15px;
}
.money>div:nth-of-type(3) {
    margin-left: 15px;
}
.money01 {
    background: #19D28F;
    display: flex;
    align-items: center;
    width: 25%;
}

.money01 div:nth-of-type(1) {
    width: 100%;
    position: absolute;
    font-size: 14px;
    top: -8px;
}

.money01 div:nth-of-type(2) {
    display: flex;
    /* border: 1px red solid; */
    width: 100%;
    align-items: center;
}

.money01 div:nth-of-type(2) span {
    font-weight: bold;
    font-size: 18px;
}

.money01 div:nth-of-type(2) i {
    font-size: 50px;
    /* border: 1px red solid; */
    margin-left: 30%;
}

.money01>div {
    width: 50%;
}
</style>